﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sales_VisitRate.aspx.cs"
    Inherits="Reports_Sales_VisitRate" ValidateRequest="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>巡店督导拜访率</title>
    <link href="../resources/styles/style.css" type="text/css" rel="stylesheet" />
    <link href="../js/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../js/highcharts.js" type="text/javascript"></script>
    <script src="../js/exporting.js" type="text/javascript"></script>
    <script src="../JavaScript/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="../JavaScript/common.js" type="text/javascript"></script>
    <script type="text/javascript">
        var chart, categories, t_text, series = new Array();
        var target = '60';
        var columns = [[
    { field: 'ORGANIZATION_NAME', title: '组织部门', width: 100, sortable: true },
    { field: 'USER_NAME', title: '姓名', width: 100, sortable: true },
    { field: 'NOT_VISIT', title: '未拜访店数', width: 80, sortable: true },
    { field: 'VISIT_SUM', title: '已拜访店数', width: 80, sortable: true },
    { field: 'TOTAL', title: '计划店数', width: 80 },
    { field: 'RATE', title: '拜访率', width: 80, sortable: true, formatter: function (value, rec) {
        if (parseFloat(value) > parseFloat(target)) { return '<span style="color:green">' + value + '%</span>'; } else { return '<span style="color:red">' + value + '%</span>'; }
    }
    },
    { field: 'AVG_TIME', title: '平均在店耗时', width: 80}]];

        function BindData() {
            var dataArr = "{'Domain_ID': '<%= MyStateManager.DomainID %>', 'Start_Date': '" + $('#start_date').val() + "', 'End_Date':'" + $('#end_date').val() + "', 'Users_ID':'<%= MyStateManager.UsersID %>', 'ShowType':'" + $('#showType').val() + "'}";
            $.ajax({
                url: "Sales_VisitRate.aspx/SelectMethodDate",
                data: dataArr,
                type: "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (getdata) {
                    if (getdata.d == "") {
                        //$.messager.alert('提示消息', '查询无相关数据!', 'info');
                    }
                    else {
                        categories = new Array();
                        t_text = $('#showType option:selected').text();
                        var data = jQuery.parseJSON(getdata.d).rows;
                        var s = Array(), datas = Array();
                        for (var i in data) {
                            for (var j in data[i]) {
                                if (i == 0 && j != "USER_NAME") {
                                    categories.push(j.substring(5));
                                }
                                if (j != "USER_NAME") datas.push((!data[i][j]) ? 0 : data[i][j]);
                            }
                            s.push('{ "name": "' + data[i]["USER_NAME"] + '", "data": [' + datas.toString() + '] }');
                            datas = Array();
                        }
                        var str = "[" + s.toString() + "]";
                        series = $.parseJSON(str);
                        ShowChart();
                    }
                },
                error: function (xhr) {
                    $.messager.alert('警告消息', xhr.responseText, 'warning');
                }
            });
        }

        function ShowChart() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'line'
                },
                title: {
                    text: '巡店督导' + t_text,
                    x: -20 //center
                },
                xAxis: {
                    categories: categories,
                    labels: {
                        step: 2
                    }
                },
                yAxis: {
                    title: { text: t_text },
                    plotLines: [{ value: 0, width: 1, color: '#808080'}]
                },
                tooltip: {
                    formatter: function () {
                        var str = ($('#showType').val() == 'RATE') ? ((parseFloat(this.y) > parseFloat(target)) ? '<span style="color:green">' : '<span style="color:red">') : '<span>';
                        return '<b>' + this.series.name + '</b><br/>' +
                        this.x + ': ' + str + this.y + '</span>' + (($('#showType').val() == 'RATE') ? '%' : '家');
                    }
                },
                legend: {
                    layout: 'vertical', align: 'right', verticalAlign: 'top',
                    x: -10, y: 100, borderWidth: 0
                },
                series: series,
                lang: { exportButtonTitle: "保存", downloadJPEG: "另存为JPEG", downloadPNG: "另存为PDF", printButtonTitle: "打印",
                    downloadPNG: "另存为PNG", downloadSVG: "另存为SVG", downloadPDF: "另存为PDF", loading: "加载中..."
                }
            });
        }

        function ShowGrid() {
            $('#dg').datagrid({
                width: $('#wsd_inputtable').width(),
                rownumbers: true,
                columns: columns
            });
        }

        function SelectClick() {
            var dataArr = "{'Domain_ID': '<%= MyStateManager.DomainID %>', 'Start_Date': '" + $('#start_date').val() + "', 'End_Date':'" + $('#end_date').val() + "', 'Users_ID':'<%= MyStateManager.UsersID %>'}";
            $.ajax({
                url: "Sales_VisitRate.aspx/SelectMethod",
                data: dataArr,
                type: "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (getdata) {
                    if (getdata.d == "") {
                        $.messager.alert('提示消息', '查询无相关数据!', 'info');
                    }
                    else {
                        var data = eval('(' + getdata.d + ')');
                        ShowGrid();
                        $('#dg').datagrid('loadData', data);
                    }
                },
                error: function (xhr) {
                    $.messager.alert('警告消息', xhr.responseText, 'warning');
                }
            });
        }

        function setDateDay() {
            var Nowdate = new Date();
            var MonthNextFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth() - 1, Nowdate.getDate());
            var MonthLastDay = new Date(MonthNextFirstDay - 86400000);
            $('#start_date').val(MonthLastDay.format("yyyy-MM-dd"));
            $('#end_date').val(Nowdate.format("yyyy-MM-dd"));
        }

        $(function () {
            setDateDay();
            $('#bt_select').click(function () {
                if ($('#start_date').val() == "" || $('#end_date').val() == "") {
                    $.messager.alert('警告消息', "开始时间与结束时间为必填项!", 'warning');
                    return false;
                }
                SelectClick();
                BindData();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="wsd_inputtable">
        <tr>
            <td class="tabletitle" colspan="7">
                查询条件
            </td>
        </tr>
        <tr>
            <td class="tablefield" style="width: 100px">
                开始时间
            </td>
            <td style="width: 100px">
                <input type="text" class="Wdate" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'end_date\')||\'%y-%M-{%d}\'}'})"
                    id="start_date" />
            </td>
            <td class="tablefield" style="width: 100px">
                结束时间
            </td>
            <td style="width: 100px">
                <input type="text" class="Wdate" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'start_date\')}',maxDate:'#F{$dp.$D(\'start_date\',{d:31});}'})"
                    id="end_date" />
            </td>
            <td class="tablefield" style="width: 100px">
                显示维度
            </td>
            <td>
                <select id="showType" style="width: 100px">
                    <option value="RATE">拜访率</option>
                    <option value="VISIT_SUM">已拜访店数</option>
                    <option value="NOT_VISIT">未拜访店数</option>
                </select>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td class="buttonarea" colspan="7">
                <input type="button" class="wsd_button2" value="查 询" id="bt_select" />
            </td>
        </tr>
    </table>
    <br />
    <table id="wsd_inputtable">
        <tr>
            <td class="tabletitle" style="height: 21px" width="100%">
                巡店督导拜访率报表
            </td>
        </tr>
    </table>
    <div id="container" style="min-width: 400px; height: 300px;">
    </div>
    <table id="dg">
    </table>
    </form>
</body>
</html>
